<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="layout" content="main2"/>
        <title>List Order Line</title>
        <script type="text/javascript" src="${createLinkTo(dir:'js')}/prototype.js"></script>
        <script type="text/javascript" src="${createLinkTo(dir:'js')}/scriptaculous.js?load=effects,builder"></script>
		<style type="text/css">
			td {
				align: center;
				vertical-align: top;
			}
			.thead {
				background-color: #CCCCCC;
				font-weight: bold;
			}
			.total {
				color: red;
				height: 30px;
				background-color: #CCCCCC;
			}
		</style>
    </head>

    <body>
    
        <div class="leftBox">
            <h1>List Order Line of ${params.orderID}</h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            
            <div class="list">
                <table>
                    <tbody>
                    <tr>
                    	<td class=thead>Picture</td>
                    	<td class=thead>Name</td>
                    	<td class=thead>Quantity</td>
                    	<td class=thead>Unit Price (USD)</td>
                    </tr>
                    <g:each in="${row}" status="i" var="orderLine">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                           <td><g:remoteFunction controller="shoppingCart" action="getPictureThumbnailPath" params="id=${orderLine.productID}"></g:remoteFunction></td>
                           <td>${orderLine.productName}</td>
                           <td>${orderLine.quantity}</td>
                           <td>${orderLine.unitPrice}</td>
                        </tr>
                    </g:each>
                    </tbody>
                </table>
            </div>
            <br/>
            <a href="javascript:history.back();">Back</a>
            
        </div>

    </body>
</html>
